<template>
  <div class="app-container">
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="i" label="序号" width="80">
      </el-table-column>
      <el-table-column prop="submitUsername" label="视频作者">
      </el-table-column>
      <el-table-column prop="videName" label="视频标题">
      </el-table-column>
      <el-table-column prop="videoClassificationId" label="视频分类">
        <template slot-scope="scope">
          {{ ['学习', '运动', '搞笑', '动画', '电影', '游戏', '音乐', '生活'][scope.row.videoClassificationId] }}
        </template>
      </el-table-column>
      <el-table-column prop="videoDescription" label="视频描述">
      </el-table-column>
      <el-table-column prop="address" label="操作" width="210">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="openVideo(scope.row)">查看视频</el-button>
          <el-button size="mini" type="text" @click="approve(scope.row)">审批通过</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVideo" class="videoDialog" width="80%">
      <video class="video" preload="metadata" loop autoplay :src="dialogData.videoAddress" controls></video>
    </el-dialog>
    <el-dialog :visible.sync="approver" width="40%">
      <span>确定通过</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="approver = false">取 消</el-button>
        <el-button type="primary" @click="isApprove">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="deleted" width="40%">
      <span>确定删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleted = false">取 消</el-button>
        <el-button type="primary" @click="removeUserInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { approve, operaApprove } from '@/api/table'
export default {
  data() {
    return {
      userInfo: undefined,
      tableData: undefined,
      loading: false,
      dialogVideo: false,
      dialogVisible: false,
      approver: false,
      deleted: false,
      dialogData: {
        submitUsername: undefined,
        videName: undefined,
        videoAddress: undefined,
        videoClassificationId: undefined,
        videoDescription: undefined,
        videoId: undefined
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        userBirthDay: [
          { required: true, message: '请选择出生日期', trigger: 'blur' }
        ],
        userGender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.userInfo = this.$store.getters.token
    this.getTable()
  },
  methods: {
    getTable() {
      const data = {
        userId: this.userInfo.userId
      }
      approve(data).then(res => {
        let i = 1
        this.tableData = res.data.map(item => (item.i = i++, item))
      })
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    openVideo(value) {
      this.dialogVideo = true
      this.dialogData = structuredClone(value)
    },
    approve(value) {
      this.approver = true
      this.dialogData = structuredClone(value)
    },
    handleDelete(value) {
      this.deleted = true
      this.dialogData = structuredClone(value)
    },
    isApprove() {
      const data = {
        adminid: this.userInfo.userId,
        approveOperaStatus: 3,
        approvedVideoid: this.dialogData.videoId
      }
      operaApprove(data).then(res => {
        this.$message(res.errorMessage)
        this.getTable()
      }).finally(() => {
        this.approver = false
      })
    },
    removeUserInfo() {

    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}

.video {
  width: 100%;
  height: 100%;
}

.videoDialog::v-deep .el-dialog__body {
  height: 600px;
}
</style>
